<template>
  <div>
      <!-- 导入导出弹窗 -->
    <el-dialog v-model="props.xlsxModel" title="导入导出" width="1000px" style="height:40vh">
      <el-tabs v-model="activeTab">
        <!-- 导出模板 tab -->
        <el-tab-pane label="导出模板" name="export">
          <el-space direction="vertical" style="width: 100%">
            <el-button type="primary" @click="handleExportTemplate('course')">课程模板</el-button>
            <el-button style="margin: 20px 0;" type="primary" @click="handleExportTemplate('chapter')">章节模板</el-button>
            <el-button type="primary" @click="handleExportTemplate('video')">视频模板</el-button>
          </el-space>
        </el-tab-pane>

        <!-- 导入 tab -->
        <el-tab-pane label="导入" name="import">
          <el-form :model="importForm">
            <el-form-item label="导入类型">
              <el-radio-group v-model="importForm.type">
                <el-radio label="course">课程</el-radio>
                <el-radio label="chapter">章节</el-radio>
                <el-radio label="video">视频</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-upload
                :action="getUploadUrl()"
                :headers="uploadHeaders"
                :before-upload="beforeUpload"
                :on-success="handleUploadSuccess"
                :on-error="handleUploadError"
                accept=".xlsx,.xls"
              >
                <el-button type="primary">选择文件</el-button>
                <template #tip>
                  <div class="el-upload__tip">只能上传 xlsx/xls 文件</div>
                </template>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>


  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getToken } from '@/utils/auth'
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const props = defineProps({
  xlsxModel:{
    type:Boolean,
    default:false
  }
})

// 弹窗显示控制
const importExportVisible = ref(true)
const activeTab = ref('export')

// 导入表单数据
const importForm = ref({
  type: 'course'
})

// 上传相关配置
const uploadHeaders = {
  Authorization: 'Bearer ' + getToken()
}

// 获取上传URL
const getUploadUrl = () => {
  const baseUrl = '/dev-api/bykt'
  switch(importForm.value.type) {
    case 'course':
      return `${baseUrl}/course/import`
    case 'chapter':
      return `${baseUrl}/chapter/import`
    case 'video':
      return `${baseUrl}/video/import`
    default:
      return ''
  }
}

// 导出模板
const handleExportTemplate = (type) => {
  // const baseUrl = '/bykt'
  switch(type) {
    case 'course':
      proxy?.download(`bykt/category/export`, {}, `课程模板.xlsx`)
      break
    case 'chapter':
      proxy?.download(`bykt/chapter/export`, {}, `章节模板.xlsx`)
      break
    case 'video':
      proxy?.download(`bykt/video/export`, {}, `视频模板.xlsx`)
      break
  }
}

// 上传前校验
const beforeUpload = (file) => {
  console.log(file)
  const isExcel = /\.(xlsx|xls)$/.test(file.name.toLowerCase())
  if (!isExcel) {
    ElMessage.error('只能上传 Excel 文件!')
    return false
  }
  return true
}

// 上传成功处理
const handleUploadSuccess = (response) => {
  if (response.code === 200) {
    ElMessage.success('导入成功')
    importExportVisible.value = false
  } else {
    ElMessage.error(response.msg || '导入失败')
  }
}

// 上传失败处理
const handleUploadError = () => {
  ElMessage.error('导入失败')
}
</script>

<style  scoped>

</style>
